import 'dart:ui';
import 'package:liuxlcommon/lget/lget.dart';
import 'package:love_newf/app/com/base/base_state.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:liuxlcommon/util/re_click.dart';
import 'package:liuxlcommon/view/my_box.dart';
import 'package:liuxlcommon/view/my_style.dart';
import 'package:love_newf/app/com/view/login_input_weiget.dart';
import 'package:love_newf/app/com/view/webview/my_web/my_web_page.dart';
import 'package:love_newf/generated/assets.dart';
import 'package:love_newf/value/app_colors.dart';
import 'package:love_newf/value/app_const.dart';
import 'package:love_newf/value/app_lstyle.dart';
import 'login_logic.dart';
import 'package:liuxlcommon/view/lxl_widget.dart';
import 'package:liuxlcommon/lget/LState.dart';

class LoginPage extends StatefulWidget {
  LoginPage({super.key});

  @override
  createState() => _LoginPage();
}

class _LoginPage extends BaseState<LoginPage, LoginLogic> {
  @override
  get initData {
    extendBodyBehindAppBar = true;
    hideAppBar = true;
  }

  @override
  Widget get easyBody => LStack([
        // LImage.easy(Assets.loginLoginTopBg, null, double.infinity),
        LColumn.eazy([
          LText.easy("手机号", 16.w, fw6).padding(bottom: 8.h),
          phoneBox,
          LText.easy("验证码", 16.w, fw6).padding(top: 16.h, bottom: 8.h),
          codeBox,
          LSizeH(32.h),
          btnBox,
          LExpand(),
          xyBox,
          LSizeH(LGet.bottomPadding(context)+8.w)
        ]).align(Alignment.topLeft).margin(top: 230.w).paddingH(29.w),

        // if (logic.isBack) backBtn,
      ]).bgColor(Colors.white).onTapDown((da) => OldLInput.unfocus());

  Widget get btnBox => GetBuilder<LoginLogic>(
      id: 'logbtn',
      builder: (l) => LText.easy("登录", 16.sp, fw6)
          .style(rzBtnSty)
          .onTapL(() => logic.login()));

  Widget get phoneBox => LoginInputWeiget(
        logic.phone,
        width: double.infinity,
        hintText: '请输入手机号码',
        onChange: (text) {
          logic.phone = text;
          logic.update(['logbtn']);
        },
        type: LInputType.INT,
        maxLength: 16,
      );

  Widget get codeBox => LColumn.eazy([
        LRow(
          lStyle: LStyle(css: '''
          padding-left:12px;
          width: 317px;
          height: 52px;
          background: #F4F5F7;
          border-radius: 27px 27px 27px 27px;
      '''),
          children: [
            LColumn.eazy([
              LInput(
                logic.code,
                focusNode: logic.codeFocusNode,
                lStyle: LStyle(
                    height: 52.w,
                    maxLength: 4,
                    alignment: Alignment.centerLeft,
                    flex: 1,
                    fontSize: 14.sp,
                    hintColor: AppColors.textHintColor,
                    hintText: '请输入验证码'),
                onChanged: (text) {
                  logic.code = text;
                  logic.update(['logbtn']);
                },
                lInputType: LInputType.INT,
              ),
              // LDivider(1.w, 0xFFEAEAEA.color)
            ]).flex(1),
            10.lsw,
            Obx(() => logic.codeCount.value == 60
                ? LText(
                    '获取验证码',
                    lStyle: codeCountStyle,
                    onTap: () => logic.getCode(),
                  )
                : LText("${logic.codeCount.value}s", lStyle: codeCountStyle1)),
            6.lsw
          ],
        ),
        // LDivider(1.w, 0xFFECECEC.color)
      ]);


  Widget get xyBox => [
        LRow(
          lStyle: LStyle(
              width: double.infinity,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center),
          children: [
            LImage(
              logic.agree ? Assets.loginChecked : Assets.loginCheck,
              lStyle: LStyle(
                  height: 15.w, margin: EdgeInsets.symmetric(horizontal: 2.w)),
              onTap: () {
                logic.agree = !logic.agree;
                logic.update();
              },
            ),
            LSizeBoxWidth(2.w),
            LText.easy(  "我已阅读并同意",
                12.sp),
            InkWell(
                child: Text("《隐私协议》",
                    style: TextStyle(
                        decoration: TextDecoration.underline,
                        color: AppColors.secondColor,
                        fontSize: 12.sp)),
                //, decoration: TextDecoration.underline
                onTap: () async {
                  if (!clickable()) return;
                  // HttpRequest.requestDefaultParamsModel =
                  //     await DeviceDataPlugin.getRequestDefaultParams;
                  // Get.to(MyWebPage(url: "${HttpRequest.host}/except"));
                  Get.to(MyWebPage(url: "https://pinv.whhyn.shop/c.html"));
                })
          ],
        ),
      ].column;

  var opeBtnStyle = LStyle(fontSize: 14.sp, fontWeight: FontWeight.w400);

  get codeCountStyle => LStyle(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      textAlign: TextAlign.center,
      css: '''
       width: 76px;
      height: 39px;
      background: #FF4665;
      border-radius: 20px 20px 20px 20px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
     ''',
      alignment: Alignment.center);

  get codeCountStyle1 => LStyle(
      // backgroundColor: const Color(0xFFCFCFCF),
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      textAlign: TextAlign.center,
      css: '''
        width: 76px;
      height: 39px;
      background: #FFC7D1;
      border-radius: 20px 20px 20px 20px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
     ''',
      alignment: Alignment.center);
}
